<script setup lang="ts">
	import { onMounted, reactive, ref } from "vue";
	import {
		validatePhoneNumber
	} from '@/utlis/common.js'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad
	} from '@dcloudio/uni-app'
	import form from "../../../uni_modules/uview-plus/libs/config/props/form";
	import {
		userStore
	} from '@/pinia';
	import router from "../../../../router";
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	let editObj = reactive({
		id: '',
		details: {}
	})
	onLoad((options) => {
		console.log(options);
		if (options.id != 'qx') {
			editObj.id = options.id
			getDetail()
		}
	})
	let juanForm = ref({
		name: '',
		time: '',
		man: '',
		jian: '',
		num: '',
		limitGetNum: ''
	})
	let rules = ref({
		name: {
			required: true,
			message: '请输入正确内容',
			trigger: ['change']
		},
		// time: {
		// 	required: true,
		// 	message: '请选择时间',
		// 	trigger: ['change']
		// },
		man: {
			required: true,
			message: '请输入正确内容',
			trigger: ['change']
		},
		jian: {
			required: true,
			message: '请输入正确内容',
			trigger: ['change']
		},
		num: {
			required: true,
			message: '请输入正确内容',
			// trigger: ['change']
		},
		limitGetNum: {
			required: true,
			message: '请选择',
			// trigger: ['change']
		}
	})
	let form1 = ref(null)
	const getDetail = () => {
		proxy.$req('GET', proxy.$api.juanDetail, {
			id: editObj.id
		}).then((res) => {
			console.log(res);
			editObj.details = res.result
			juanForm.value.name = editObj.details.title
			juanForm.value.time = [editObj.details.starttime, editObj.details.endtime]
			juanForm.value.man = editObj.details.fullAmount
			juanForm.value.jian = editObj.details.subtractionAmount
			juanForm.value.num = editObj.details.circulationNum
			juanForm.value.limitGetNum = editObj.details.personLimit
		})
	}
	const submitForm = () => {
		if (juanForm.value.time.length < 1) {
			uni.showToast({
				title: '请选择时间',
				icon: 'none'
			})
			return
		}
		if (juanForm.value.man < 1 || juanForm.value.jian < 1) {
			uni.showToast({
				title: '面额门槛不正确',
				icon: 'none'
			})
			return
		}
		if (juanForm.value.man < juanForm.value.jian) {
			uni.showToast({
				title: '面额门槛不正确',
				icon: 'none'
			})
			return
		}
		let url;
		if (editObj.id) {
			url = proxy.$api.editJuan
		} else {
			url = proxy.$api.createJuan
		}
		form1.value.validate().then((e) => {
			proxy.$req('POST', url, {
				storeId: userStoreInfo.userInfo.supplier.id,
				id: editObj.id,
				title: juanForm.value.name,
				starttime: juanForm.value.time[0],
				endtime: juanForm.value.time[1],
				fullAmount: juanForm.value.man,
				subtractionAmount: juanForm.value.jian,
				circulationNum: juanForm.value.num,
				personLimit: juanForm.value.limitGetNum
			}).then((res) => {
				console.log(res);
				if (res.success) {
					uni.showToast({
						title: '创建成功',
						icon: 'none'
					})
					uni.$emit('refreshJuan')
					setTimeout(() => {
						router.back()
					}, 700)
				}
			})
		})
	}
	const limitClick = () => {
		//选择限领次数
		let arr = [1, 2, 3, 4, 5, 6, 7]
		uni.showActionSheet({
			itemList: arr,
			success(e) {
				juanForm.value.limitGetNum = arr[e.tapIndex]
			}
		})
	}
	let startTime = Date.now()
	let endTime = Date.now() + 5184000000
	let timePicker = ref(null)
	const confirmTime = (e) => {
		console.log('confirmTime', e);
	}
</script>
<template>
	<view class="form">
		<u--form :model="juanForm" :rules="rules" ref="form1" labelPosition="top" labelWidth="150">
			<u-form-item class="formItem" label="卷名称" prop="name">
				<u--input v-model="juanForm.name" border="none" placeholder="请输入"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="使用时间" prop="time">
				<view class="" style="width: 100%;">
					<uni-datetime-picker ref="timePicker" :start="startTime" :end="endTime" v-model="juanForm.time"
						type="daterange" @change="confirmTime" />
					<text
						style="font-size: 24rpx;color: #999;margin-top: 20rpx;display: inline-block;">最长可提前六十天创建，有效期不能超过六十天</text>
				</view>
			</u-form-item>
			<u-form-item class="formItem" label="面额门槛" prop="" style="border: none;">
				<view class="" style="width: 100%;">
					<view class="r-flex-center-center" style="border-bottom: 1rpx solid #e7e7e7;padding: 16rpx 0;">
						<text>满￥</text>
						<u--input v-model="juanForm.man" border="none" inputAlign="right" type="number"
							placeholder="使用门槛需大于卷面额"></u--input>
					</view>
					<view class="r-flex-center-center" style="border-bottom: 1rpx solid #e7e7e7;padding: 16rpx 0;">
						<text>减￥</text>
						<u--input v-model="juanForm.jian" inputAlign="right" border="none" type="number"
							placeholder="请输入1-5000的整数金额"></u--input>
					</view>
				</view>
			</u-form-item>
			<u-form-item class="formItem" label="发行量" prop="num">
				<u--input v-model="juanForm.num" border="none" placeholder="请输入发行量" type="number"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="每人限领" prop="limitGetNum">
				<view class="r-flex-center-center" style="width: 100%;" @click="limitClick">
					<u--input v-model="juanForm.limitGetNum" border="none" disabled disabledColor="#fff"
						placeholder="请选择" :customStyle="{pointerEvents:'none'}"></u--input>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</u-form-item>
		</u--form>
	</view>
	<view class="gysBtn" @click="submitForm('gysAddMarket')">
		发布
	</view>
</template>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	:deep(.input-value-border) {
		border: none !important;
	}


	view {
		box-sizing: border-box;
	}

	.form {
		margin: 20rpx auto 0;
		width: 750rpx;
		padding: 0 25rpx;

		.formItem {
			width: 700rpx;
			background: #FFFFFF;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 10rpx;
			padding: 13rpx 40rpx 13rpx 30rpx;
			font-weight: 400;
			color: #333333;
			letter-spacing: 0;
			margin: 20rpx auto;
			position: relative;

			.formItemArea {
				width: 100%;
			}
		}
	}

	.gysBtn {
		width: 686rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #CB645E;
		border-radius: 10rpx;
		color: #fff;
		margin: 100rpx auto 0;
	}
</style>